<template>
  <div class="group-dialog">
    <!-- 参与其他团 -->
    <section
      class="groups_otherroll middle-info-item"
      v-if="detailAll.other_group &&detailAll.other_group.length>0"
    >
      <div class="group_detail_title">
        <span class="title">
          <span class="total_num">{{detailAll.other_group.length}}</span>人正在拼单，可直接参与
        </span>
        <span class="more_btn" @click="handleOpenGroupDialog">
          查看更多
          <span class="icon">
            <!-- TODO svg替换 -->
            <i class="icon-right"></i>
          </span>
        </span>
      </div>

      <!-- <div class="group_detail_tip">以下小伙伴正在发起团购，您可以直接参与</div> -->
      <div class="nearby_group_detail_wrap">
        <div class="item" v-for="(group,index) in detailAll.other_group" :key="index">
          <div class="nearby_group_detail" v-if="index<2">
            <div class="group_detail_img">
              <img :src="group.avatar" />
            </div>
            <div class="nearby_g_owner">{{group.nickName}}</div>
            <div class="group_detail_content">
              <div class="nearby_g_left_user_num" v-if="group.type==1">
                还差<span class="number">{{group.last_num}}人</span>
              </div>
              <div class="nearby_g_left_user_num" v-else-if="group.type==2">
                还差<span class="number">{{group.last_num}}件</span>
              </div>
              <div class="nearby_g_left_time">
                {{group.residueTime == '时间到'? '' :'剩余'}} <span>{{group.residueTime}}</span>
              </div>
            </div>
            <van-button round class="btn" @click="openLink(group.url)">去参团</van-button>
          </div>
        </div>
      </div>
    </section>
    <van-popup v-model="dialogVisible" class="group-pop">
      <div class="group-wrap">
        <div class="title">正在拼团</div>
        <div class="nearby_group_detail_wrap">
          <div class="item" v-for="(group,index) in timeLists" :key="index">
            <div class="nearby_group_detail">
              <div class="group_detail_img">
                <img :src="group.avatar" />
              </div>
              <div class="group_detail_content">
                <div class="nearby_g_owner">{{group.nickName}}</div>
                <div class="nearby_g_left_user_num" v-if="group.type==1">
                  还差<span class="number">{{group.last_num}}人</span>
                </div>
                <div class="nearby_g_left_user_num" v-else-if="group.type==2">
                  还差<span class="number">{{group.last_num}}件</span>
                </div>

                <div class="nearby_g_left_time">
                  {{group.residueTime == '时间到'? '' :'剩余'}} <span>{{group.residueTime}}</span>
                </div>
              </div>
              <van-button round class="btn" @click="openLink(group.url)">去参团</van-button>
            </div>
          </div>
        </div>
        <div class="close-btn" @click="closeDialog"></div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
var timeId
export default Vue.extend({
  name: 'index',
  props: {
    detailAll: {}
  },
  data() {
    return {
      dialogVisible: false,
      timeLists: []
    }
  },

  created() { // 实例被创建之后执行代码
    this.getTimeList()
  },
  beforeDestroy() { // 组件的销毁
    clearInterval(timeId) // 清除定时器
    timeId = null
  },
  methods: {
    openLink(link) {
      openPage(link)
    },
    // 打开更多参团
    handleOpenGroupDialog() {
      this.dialogVisible = true
    },
    // 点击关闭按钮
    closeDialog() {
      this.dialogVisible = false
    },

    // 获取各节日时间
    getTimeList() {
      this.setIntervalTime() // 调取倒计时
    },
    // 设置定时器做倒计时
    setIntervalTime() {
      timeId = setInterval(() => {
        this.detailAll.other_group.forEach(item => {
          // 不知道原来写的代码是什么意思 修改为 不管是否自动成团都按结束时间倒计时
          // if (this.detailAll.info.is_success_auto == 1) {
          item.residueTime = this.getResidueTime(item.last_end_time)
          // } else if (this.detailAll.info.is_success_auto == 0) {
          //   item.residueTime = this.getResidueTime((item.add_time - 0))
          //   // // console.log(item.residueTime)
          // }
        })
        this.timeLists = Object.assign({}, this.timeLists, this.detailAll.other_group)
      }, 1000)
    },
    // 获取剩余时间
    getResidueTime(end) {
      const nowtime = new Date().getTime() // 当前时间 毫秒数
      const endTime = end * 1000 // 结束时间  毫秒数
      const totalSeconds = (endTime - nowtime) / 1000 // 结束时间-当前时间 = 剩余多少时间
      let day = 0
      let hour = 0
      let minute = 0
      let second = 0
      if (totalSeconds > 0) {
        day = parseInt(totalSeconds / 3600 / 24) // 天
        hour = parseInt((totalSeconds / 3600) % 24) // 时
        minute = parseInt((totalSeconds / 60) % 60) // 分
        second = parseInt(totalSeconds % 60) // 秒
        // 不知道倒计时具体有什么问题 临时解决办法：小于 1 小时时候 天数归 0
        if (hour < 1) {
          day = 0
        }
      } else {
        day = 0 // 天
        hour = 0 // 时
        minute = 0 // 分
        second = 0 // 秒
        clearInterval(timeId)
      }
      hour = this.addZero(hour)
      minute = this.addZero(minute)
      second = this.addZero(second)
      let residueTime = day + '天' + hour + ':' + minute + ':' + second
      if (totalSeconds < 0) {
        residueTime = '时间到'
      }
      return residueTime
    },
    // 补齐格式不满10加0
    addZero(n) {
      return n < 10 ? '0' + n : n
    }
  }
})
</script>

<style  lang="scss">
@import "src/styles/mixin";
@import "src/styles/variables";
//参与其他团
.group-dialog {
  .middle-info-item {
    margin-bottom: 20px;
    padding: 30px;
    border-radius: 20px;
    background: #fff;
  }
  .group_detail_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .title {
      font-size: 28px;
      .total_num {
        color: #f21228;
      }
    }
    .more_btn {
      color: #999;
      .icon {
        font-size: 20px;
        .svg-icon {
          vertical-align: 0px;
        }
      }
    }
  }
  .nearby_group_detail_wrap {
    .nearby_group_detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      border-bottom: 2px solid #ededed;
      &:last-child {
        border: 0;
      }
      .group_detail_img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        img {
          display: block;
          width: 100%;
          border-radius: 50%;
        }
      }
      .nearby_g_owner {
        margin-left: 16px;
        font-size: 26px;
      }
      .group_detail_content {
        flex: 1;
        text-align: right;
        .nearby_g_left_user_num {
          font-size: 28px;
          .number {
            color: #f21228;
          }
        }
        .nearby_g_left_time {
          margin-top: 10px;
          color: #999;
        }
      }
      .btn {
        height: 50px;
        margin-left: 16px;
        padding: 0 28px;
        border: 0;
        font-size: 24px;
        color: #fff;
        background: linear-gradient(
          -90deg,
          rgba(233, 1, 4, 1),
          rgba(254, 27, 73, 1)
        );
        box-shadow: 0px 6px 12px 0px rgba(235, 3, 9, 0.2);
      }
    }
  }
  //弹窗
  .group-pop{
    width:600px;
    height:800px;
    border-radius:20px;
    .title{
      padding:36px 0 44px;
      font-size:36px;
      font-weight:bold;
      text-align:center;
      background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/group_pop.png") no-repeat;
      background-size:100% 100%;
      color:#F21228;
    }
    .nearby_group_detail_wrap{
      padding:0 30px;
      height:660px;
      overflow:auto; 
      .item{
        border-bottom:2px solid #EDEDED;
        &:last-child{
          border:0;
        }
      }
      .group_detail_content{
        text-align: left;
        margin-left: 20px;
        .nearby_g_owner{
          display:inline-block;
          margin:0;
        }
        .nearby_g_left_user_num{
          display:inline-block;
          margin-left:2px;
          font-size:22px;
          color:#F21228;
        }
        .nearby_g_left_time{
          margin-top:10px;
          font-size:22px;
          color:#999;
        }
      }
      .btn{
        background:#F21228;
        box-shadow:none;
      }
    }
  }
}
</style>
